<template>
  <div>
    <div class="container">
      <div
        class="item"
        @click="change('info')"
      >
        个人信息
      </div>
      <div
        class="item"
        @click="change('records')"
      >
        兑换记录
      </div>
    </div>

    <Info v-if="current === 'info'" />
    <Records v-if="current === 'records'" />
  </div>
</template>

<script>
import Info from '@/views/userinfo/components/Info.vue';
import Records from '@/views/userinfo/components/Records.vue';

export default {
  components: {
    Info,
    Records,
  },
  data() {
    return {
      current: 'info',
    };
  },
  methods: {
    change(v) {
      this.current = v;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
}

.item {
  width: 100px;
  margin-left: 20px;
}
</style>
